<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        #app{
            display: inline-block;
        }
        div{
            margin-top: 50px;
            margin-left: 50px;
            display: inline-block;
            width: 310px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .blue{
            background-color: #a9e8ee;
        }
        .box{
            background-color: red;
            color: aliceblue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <span id="app">
    <div @click="one" :class="classname">{{ shouye }}</div>
    <div @click="two" :class="classname1">{{ tiyu }}</div>
    <div @click="three" :class="classname2">{{ junshi }}</div>
    <div @click="four" :class="classname3">{{ shenghuo }}</div>
        <h3>{{ num }}</h3>
    </span>
    <span></span>
    <script>
        new Vue({
            el:'#app',
            data:{
                shouye:"首页",
                tiyu:"体育",
                shenghuo:"生活",
                junshi:"军事",
                num:"首页",
                classname:"blue",
                classname1:"blue",
                classname2:"blue",
                classname3:"blue",
            },
            methods: {
                one(e){
                    this.classname="box"
                    this.classname1="blue"
                    this.classname2="blue"
                    this.classname3="blue"
                    this.num = "首页"
                },
                two(e){
                    this.classname="blue"
                    this.classname1="box"
                    this.classname2="blue"
                    this.classname3="blue"
                    this.num = "体育"
                },
                three(e){
                    this.classname="blue"
                    this.classname1="blue"
                    this.classname2="box"
                    this.classname3="blue"
                    this.num = "军事"
                },
                four(e){
                    this.classname="blue"
                    this.classname1="blue"
                    this.classname2="blue"
                    this.classname3="box"
                    this.num = "生活"
                },
            }
        })
    </script>
</body>
</html>